import React from 'react';
import {
  View,
  Text,
  Button,
  Platform,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation} from '@react-navigation/native';

import {Header} from '@react-navigation/elements';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

import {useMount} from 'ahooks';
import {ShadowedView, shadowStyle} from 'react-native-fast-shadow';
import style from './style.less';

import ToggleDrawer from '../../ToggleDrawer';

const HeaderTitle = ({ToggleDrawer, ...otherProps}) => {
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const defHeaderHeight = getDefaultHeaderHeight(frame, false, insets.top);
  const height = defHeaderHeight - insets.top;

  const svStyle = shadowStyle({
    opacity: 0.2,
    radius: 2,
    offset: [0, 2],
    color: '#666',
  });

  return (
    <ShadowedView style={svStyle}>
      <View style={{height: height, backgroundColor: '#FFF'}}></View>
    </ShadowedView>
  );
};
const rPPath = 'OPlayer';
export default ({leftNavIsOpen, setLeftNavIsOpen}) => {
  const navigation = useNavigation();
  // useMount(() => {
  //   navigation.setOptions({
  //     headerShown: false,
  //   });
  // });
  return (
    <View
      style={{
        flex: 1,
      }}>
      <View style={{flex: 1, padding: 0}}>
        <HeaderTitle
          ToggleDrawer={
            <ToggleDrawer
              leftNavIsOpen={leftNavIsOpen}
              setLeftNavIsOpen={setLeftNavIsOpen}
            />
          }
        />
        <ScrollView style={{flex: 1}}>
          <Text>视频</Text>
          <Button
            title="Audio"
            onPress={() => {
              navigation.navigate(`${rPPath}/Audio`);
            }}
          />
        </ScrollView>
      </View>
    </View>
  );
};
